<template lang="html">
  <div v-loading="loading" class="main-panel">
    <!--    <el-button type="primary" @click="mapDialog('post')">添加</el-button>-->
    <!--    <el-dialog v-loading="loading" title="编辑" :visible.sync="mapDiaIsShow" class="diaForm" :append-to-body="false">-->
    <!--      <el-form-->
    <!--        ref="mapRef"-->
    <!--        :model="mapForm"-->
    <!--        :rules="mapRules"-->
    <!--        label-width="140px"-->
    <!--      >-->
    <!--        <el-form-item label="车牌号" prop="plate_number">-->
    <!--          <el-col :span="15">-->
    <!--            <el-input-->
    <!--              v-model="mapForm.plate_number"-->
    <!--              type="text"-->
    <!--              placeholder="请输入车牌号"-->
    <!--            />-->
    <!--          </el-col>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item>-->
    <!--          <el-button-->
    <!--            type="primary"-->
    <!--            @click="editMap()"-->
    <!--          >确认-->
    <!--          </el-button>-->
    <!--          <el-button @click="mapDiaIsShow = false">取消</el-button>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--    </el-dialog>-->
<!--        <span v-for="item in mapTableData" style="float: left;width: 300px;height: 100%">-->
<!--          <el-card class="box-card">-->
<!--            <div slot="header" class="clearfix">-->
<!--              <span>{{item.label}}</span>-->
<!--            </div>-->
<!--            <el-collapse>-->
<!--              <el-collapse-item v-for="item2 in item.children" :title="item2.label" :name="item2.label">-->
<!--                <div v-for="item3 in item2.children">{{item3.label}}</div>-->
<!--              </el-collapse-item>-->
<!--            </el-collapse>-->
<!--          </el-card>-->
<!--        </span>-->
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
    <table>
      <tr v-for="item in mapTableData">
        <th>{{item.label}}</th>
          <td v-for="item2 in item.children">{{item2.label}}</td>
      </tr>
    </table>

    <!--    <el-table-->
    <!--      :data="mapTableData"-->
    <!--      border-->
    <!--      style="width: 100%"-->
    <!--    >-->
    <!--      <el-table-column-->
    <!--        prop="create_time"-->
    <!--        label="创建时间"-->
    <!--      />-->
    <!--      <el-table-column-->
    <!--        prop="update_time"-->
    <!--        label="更新时间"-->
    <!--      />-->
    <!--      <el-table-column-->
    <!--        fixed="right"-->
    <!--        label="操作"-->
    <!--        width="100"-->
    <!--        align="center"-->
    <!--      >-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button type="text" size="small" @click="mapDialog('put',scope.row)">编辑</el-button>-->
    <!--          <el-button type="text" size="small" @click="deleteMap(scope.row)">删除</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <!--    <div style="text-align:center;margin-top:20px">-->
    <!--      <el-pagination-->
    <!--        :current-page="mapTableDataPaginateCurrentPage"-->
    <!--        :page-sizes="mapTableDataPaginateTotalPageSizes"-->
    <!--        :page-size="mapTableDataPaginateTotalPageSize"-->
    <!--        layout="total, sizes, prev, pager, next, jumper"-->
    <!--        :total="mapTableDataPaginateTotal"-->
    <!--        @size-change="mapTableDataHandleSizeChange"-->
    <!--        @current-change="mapTableDataHandleCurrentChange"-->
    <!--      >-->
    <!--        &lt;!&ndash; <span>当前{{ mapTableDataPaginateCurrentPage }}页，</span>-->
    <!--                        <span>共{{ mapTableDataPaginateLastPage }}页</span> &ndash;&gt;-->
    <!--      </el-pagination>-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      mapSearchForm: {},
      mapTableData: [],
      mapTableDataPaginateCurrentPage: 1,
      mapTableDataPaginateTotal: 1,
      mapTableDataPaginateLastPage: 1,
      mapTableDataPaginateTotalPageSize: 10,
      mapTableDataPaginateTotalPageSizes: [10, 20, 50, 100],
      mapTab: [],
      mapEditType: 'post',
      mapDiaIsShow: false,
      mapForm: {},
      mapRules: {
        mobile_number: [{
          required: true,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getMapList(1, 10000)
  },
  methods: {
    mapTableDataHandleSizeChange(val) {
      // 改变每页显示的条数
      this.mapTableDataPaginateTotalPageSize = val
      this.getMapList(1, this.mapTableDataPaginateTotalPageSize)
    },
    mapTableDataHandleCurrentChange(val) {
      this.mapTableDataPaginateCurrentPage = val
      this.getMapList(val, this.mapTableDataPaginateTotalPageSize)
    },
    getMapList(page = 1, limit = 10) {
      this.loading = true
      this.mapSearchForm.page = page
      this.mapSearchForm.limit = limit
      this.$store.dispatch('order/getMapList', this.mapSearchForm).then((res) => {
        this.mapTableData = res.data
        console.log(this.mapTableData)
        this.mapTableDataPaginateTotal = res.data.total
        this.mapTableDataPaginateCurrentPage = res.data.current_page
        this.mapTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteMap(row) {
      // console.log(row)
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.$store.dispatch('order/deleteMap', { id: row.id }).then((res) => {
            this.getMapList()
            this.loading = false
            this.mapDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            // this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editMap() {
      switch (this.mapEditType) {
        case 'post':
          this.$refs['mapRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('map/postMap', this.mapForm).then((res) => {
                this.getMapList()
                this.mapForm = {}
                this.loading = false
                this.mapDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
        case 'put':
          this.$refs['mapRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('map/putMap', this.mapForm).then((res) => {
                this.getMapList()
                this.mapForm = {}
                this.loading = false
                this.mapDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
      }
    },
    mapDialog(type, row) {
      this.mapDiaIsShow = true
      switch (type) {
        case 'post':
          this.mapEditType = 'post'
          break
        case 'put':
          this.mapEditType = 'put'
          // 这里一定要使用nextTick的方式赋值，不然会卡住input
          this.$nextTick(() => {
            //   this.$set(this.mapForm, 'id', row.id)
          })
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
  padding: 18px;
  font-size: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 300px;
}
</style>
